<!--通行申请查看审批-->
<template>
  <div class="log">
    <basic-container>
      <el-row :span="24">
        <!--第一个框基础信息-->
        <el-col :span="11" class="left">
          <h3 style="margin: 10px 0">查看审批</h3>
          <div>
            <p>学生姓名：{{this.form.name}}</p>

            <p v-if="this.form.sex === 0">学生性别：女</p>
            <p v-if="this.form.sex === 1">学生性别：男</p>

            <p v-if="this.form.number === null">学生学号：未设置</p>
            <p v-else>学生学号：{{this.form.number}}</p>

            <p v-if="this.form.gradeName === null">学生年级：未设置</p>
            <p v-else>学生年级：{{this.form.gradeName}}</p>

            <p v-if="this.form.className === null">学生班级：未设置</p>
            <p v-else>学生班级：{{this.form.className}}</p>

            <p v-if="this.form.buildingName === null">楼栋：未设置</p>
            <p v-else>楼栋：{{this.form.buildingName}}</p>

            <p v-if="this.form.dormNumber === null">宿舍号：未设置</p>
            <p v-else>宿舍号：{{this.form.dormNumber}}</p>

            <p>申请时间：{{this.form.createTime}}</p>

            <p v-if="this.form.cause === null" style="width: 95%;">申请理由：无</p>
            <p v-else style="width: 95%">申请理由：{{this.form.cause}}</p>
          </div>
          <el-col style="height: 130px">
            <div v-if="this.form.photos === null || this.form.photos === ''">
              <p>附件说明：无</p>
            </div>
            <div v-else>
              <p class="enclosure">附件说明：</p>
              <div class="demo-image__preview photo" v-for="url in img" :key="url">
                <el-image
                    style="width: 100px; height: 100px"
                    class="avatar"
                    :src="url"
                    :preview-src-list="img">
                </el-image>
              </div>
            </div>
          </el-col>
        </el-col>
        <!--第二个框时间组信息-->
        <el-col :span="12" class="right">
          <h3>原校门通行时间组</h3>
          <div class="rightTop">
            <p class="rightTopLeft" v-if="this.form.oldTimePlanName === null">无通行时间组</p>
            <p class="rightTopLeft" v-else>{{this.form.oldTimePlanName}}</p>
            <el-button
                class="filter-item"
                type="text"
                @click.native="seeDetailsOld">[查看详情]
            </el-button>
          </div>
          <h3>申请修改为以下通行时间组</h3>
          <div class="rightBottom">
            <p class="rightBottomLeft" v-if="this.form.timePlanName === null">无通行时间组</p>
            <p class="rightBottomLeft" v-else>{{this.form.timePlanName}}</p>
            <el-button
                class="filter-item"
                type="text"
                @click.native="seeDetailsNew">[查看详情]
            </el-button>
          </div>
        </el-col>
        <!--第三个框审批进度-->
        <el-col class="Bottom">
          <h3 style="margin: 10px 0">审批进度</h3>
          <div style="height: 198px">
            <div class="set one">
              <i class="icon-yun-shangchuan" style="font-size: 76px!important;color:#4A71E3"></i>
              <p>发起人：{{this.form.createUser}}</p>
              <p>发起时间：{{this.form.createTime}}</p>
            </div>
            <div class="set two">
              <i v-if="this.form.teacherApprove === 0" class="icon-youjiantou-" style="font-size: 76px!important;color:#e6a23c"></i>
              <i v-if="this.form.teacherApprove === 1" class="icon-youjiantou-" style="font-size: 76px!important;color:#4A71E3"></i>
              <i v-if="this.form.teacherApprove === 2" class="icon-youjiantou-" style="font-size: 76px!important;color:#e63c3c"></i>
            </div>
            <div class="set there">
              <i v-if="this.form.teacherApprove === 0" class="icon-yun--tianchong" style="font-size: 76px!important;color:#e6a23c"></i>
              <i v-if="this.form.teacherApprove === 1" class="icon-wancheng-copy" style="font-size: 76px!important;color:#4A71E3"></i>
              <i v-if="this.form.teacherApprove === 2" class="icon-yun-duankai" style="font-size: 76px!important;color:#e63c3c"></i>

              <p v-if="this.form.teacherApproveTime === null">审批时间：无</p>
              <p v-else>审批时间：{{this.form.teacherApproveTime}}</p>

              <p v-if="this.form.teacherApprove === 0">审批状态：<span style="color: #e6a23c">待审批</span></p>
              <p v-if="this.form.teacherApprove === 1">审批状态：<span style="color: #4A71E3">已通过</span></p>
              <p v-if="this.form.teacherApprove === 2">审批状态：<span style="color: #e63c3c">已驳回</span></p>

              <p v-if="this.form.teacherApproveAdvice === null">审批意见：无</p>
              <p v-else>审批意见：{{this.form.teacherApproveAdvice}}</p>
            </div>

            <div v-if="this.form.teacherApprove === 2">
              <div class="set for">
                <i class="icon-youjiantou-" style="font-size: 76px!important;color:#c0c0c0"></i>
              </div>
              <div class="set five">
                <i class="icon-yun-duankai" style="font-size: 76px!important;color:#c0c0c0"></i>
                <p>审批时间：无</p>
                <p>审批状态：<span style="color: #c0c0c0">无需审批</span></p>
                <p>审批意见：无</p>
              </div>
            </div>
            <div v-else>
              <div class="set for">
                <i v-if="this.form.prefectApprove === 0" class="icon-youjiantou-" style="font-size: 76px!important;color:#e6a23c"></i>
                <i v-if="this.form.prefectApprove === 1" class="icon-youjiantou-" style="font-size: 76px!important;color:#4A71E3"></i>
                <i v-if="this.form.prefectApprove === 2" class="icon-youjiantou-" style="font-size: 76px!important;color:#e63c3c"></i>
              </div>
              <div class="set five">
                <i v-if="this.form.prefectApprove === 0" class="icon-yun--tianchong" style="font-size: 76px!important;color:#e6a23c"></i>
                <i v-if="this.form.prefectApprove === 1" class="icon-wancheng-copy" style="font-size: 76px!important;color:#4A71E3"></i>
                <i v-if="this.form.prefectApprove === 2" class="icon-yun-duankai" style="font-size: 76px!important;color:#e63c3c"></i>

                <p v-if="this.form.prefectApproveTime === null">审批时间：无</p>
                <p v-else>审批时间：{{this.form.prefectApproveTime}}</p>

                <p v-if="this.form.prefectApprove === 0">审批状态：<span style="color: #e6a23c">待审批</span></p>
                <p v-if="this.form.prefectApprove === 1">审批状态：<span style="color: #4A71E3">已通过</span></p>
                <p v-if="this.form.prefectApprove === 2">审批状态：<span style="color: #e63c3c">已驳回</span></p>

                <p v-if="this.form.prefectApproveAdvice === null">审批意见：无</p>
                <p v-else>审批意见：{{this.form.prefectApproveAdvice}}</p>
              </div>
          </div>
          </div>
        </el-col>
        <el-col style="text-align: center;margin-top: 20px" v-if="this.form.teacherApprove === 0 || this.form.prefectApprove === 0">
          <el-button
              class="filter-item"
              style="margin-right: 20px"
              @click="cancel">返回
          </el-button>
          <el-button
              class="filter-item"
              type="danger"
              style="margin-right: 20px"
              @click="overrule">驳回
          </el-button>
          <el-button
              class="filter-item"
              type="primary"
              style="margin-right: 20px"
              @click="success">通过
          </el-button>
        </el-col>
        <el-col v-else style="text-align: center;margin-top: 20px" >
          <el-button
              class="filter-item"
              style="margin-right: 20px"
              @click="cancel">返回
          </el-button>
        </el-col>
      </el-row>

      <!--驳回弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          width="32%"
          :close-on-click-modal="false"
          @close="dictItemVisible">
          <h3>提示</h3>
        <div v-if="this.teacherOperator === true || this.Operator === true">
          <p>确认驳回[{{this.form.gradeName}}][{{this.form.className}}][{{this.form.name}}]的更改时间段申请?</p>
          <p style="color:#4A71E3">填写审批意见</p>
          <el-input v-model="teacherApproveAdvice" v-if="this.teacherOperator === true" type="textarea" :rows="4" placeholder="非必填"></el-input>
          <el-input v-model="prefectApproveAdvice" v-else-if="this.Operator === true" type="textarea" :rows="4" placeholder="非必填"></el-input>
          <div style="text-align: center">
            <el-button
               class="filter-item"
               size="small"
               type="danger"
               style="margin: 20px 0 0 0"
               @click="handleUpdateOverrule()">确认驳回
            </el-button>
          </div>
        </div>
        <div v-else>
          <h2 class="error">您没有操作权限</h2>
        </div>
      </el-dialog>

      <!--通过弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisibleSuccess"
          width="32%"
          :close-on-click-modal="false"
          @close="dictItemVisible">
          <h3>提示</h3>
        <div v-if="this.teacherOperator === true || this.Operator === true">
          <p>确认通过[{{this.form.gradeName}}][{{this.form.className}}][{{this.form.name}}]的更改时间段申请?</p>
          <p style="color:#4A71E3">填写审批意见</p>
          <el-input v-model="teacherApproveAdvice" v-if="this.teacherOperator === true" type="textarea" :rows="4" placeholder="非必填"></el-input>
          <el-input v-model="prefectApproveAdvice" v-else-if="this.Operator === true" type="textarea" :rows="4" placeholder="非必填"></el-input>
          <div style="text-align: center">
            <el-button
                class="filter-item"
                size="small"
                type="primary"
                style="margin: 20px 0 0 0"
                @click="handleUpdateSuccess()">确认通过
            </el-button>
          </div>
        </div>
        <div v-else>
          <h1 class="error">您没有操作权限</h1>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {approvalObj, idObj, operationObj} from "@/api/pass/approval";
import {addScheduleObj} from "@/api/pass/s-newtimegroup";

export default {
  name: 'seeApproval',
  data() {
    return {
      tableLoading: false,
      form: [],
      dialogEditVisible:false,
      dialogEditVisibleSuccess:false,
      url:'',
      img:[],
      avatar: "",
      ApproverId:[],
      Operator:'',
      teacherOperator:'',
      teacherApproveAdvice:'',
      prefectApproveAdvice:'',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  mounted() {
    this.geteditList()
  },
  methods: {
    //  获取时间组数据
    geteditList: function () {
      let param = this.$route.query
      approvalObj(param).then(res => {
        if (res.data.code === 0) {
          this.form = res.data.data.records[0]
         if (this.form.photos !== ''){
           let photoArr = []
           photoArr = this.form.photos.split(",");
           for (let i = 0; i < photoArr.length; i++) {
             let urls = photoArr[i].toLocaleString()
             this.avatar = 'admin/sys-file/campus-files?fileName='+urls ;
             axios.get(this.avatar, {
               responseType: 'blob'
             }).then((res) => {
               this.url = window.URL.createObjectURL(res.data);
               this.img.push(this.url)
             })
           }
         }
        }
      })
      let params = this.userInfo.userId
      let isTeacher= false;
      let isLeader= false;
      idObj(params).then(res =>{
        if (res.data.code === 0){
          let approvers = res.data.data
          for (let i = 0; i < approvers.length; i++){
            let  approverId = approvers[i].identity
            if (approverId === 1){
              isTeacher = true;
            }
            if (approverId === 13){
              isLeader = true
            }
          }
          if (isTeacher && isLeader){
            this.Operator = true;
          }else if (isTeacher && !isLeader){
            this.teacherOperator = true
          }else if (!isTeacher && isLeader){
            this.Operator = true;
          }else {
            this.Operator = false;
            this.teacherOperator = false
          }
        }else{
          this.$message.error("数据错误")
        }
      })
    },


    //原有的时间组跳转页面
    seeDetailsOld(){
      const src = `/pass/outTime-see/${this.form.oldTimePlanId}`
      this.$router.push({
        path: src,
        query: {id: this.form.oldTimePlanId}
      })
    },

    //更改为时间组跳转页面
    seeDetailsNew(){
      const src = `/pass/outTime-see/${this.form.timePlanId}`
      this.$router.push({
        path: src,
        query: {id: this.form.timePlanId}
      })
    },

    //驳回
    handleUpdateOverrule(){
        this.tableLoading = true
        var date = new Date();
        var year=date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
        // 拼接
        this.teacherApproveTime = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        this.prefectApproveTime = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;

        //班主任
        if (this.teacherOperator === true){
          let param = {
            'id':this.$route.query.id,
            'teacherApproveAdvice':this.userInfo.username+this.teacherApproveAdvice,
            'teacherApproveTime':this.teacherApproveTime,
            'teacherApprove':2,
            'prefectApprove':3,
            'status':2,
          }
          operationObj(param).then(() => {
            this.dialogEditVisible = false
            this.$message.success('驳回成功！')
            this.geteditList()
          })
        }

      //级长
      if (this.form.teacherApprove === 1 && this.Operator === true && this.form.prefectApprove === 0){
        let param = {
          'id':this.$route.query.id,
          'prefectApproveAdvice':this.userInfo.username+this.prefectApproveAdvice,
          'prefectApproveTime':this.prefectApproveTime,
          'prefectApprove':2,
          'status':2,
        }
        operationObj(param).then(() => {
          this.dialogEditVisible = false
          this.$message.success('驳回成功！')
          this.geteditList()
        })
      } else if (this.form.teacherApprove === 0 && this.Operator === true && this.form.prefectApprove === 0){
        this.dialogEditVisible = false
        this.$message.error('请等待班主任操作完成')
      }
    },

    //通过
    handleUpdateSuccess(){
      this.tableLoading = true
      var date = new Date();
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      this.teacherApproveTime = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      this.prefectApproveTime = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;

      //班主任
      if (this.teacherOperator === true){
        let param = {
          'id':this.$route.query.id,
          'teacherApproveAdvice':this.userInfo.username+this.teacherApproveAdvice,
          'teacherApproveTime':this.teacherApproveTime,
          'teacherApprove':1,
        }
        operationObj(param).then(() => {
          this.dialogEditVisibleSuccess = false
          this.$message.success('通过成功！')
          this.geteditList()
        })
      }

      //级长
      if (this.form.teacherApprove === 1 && this.Operator === true && this.form.prefectApprove === 0){
        let param = {
          'id':this.$route.query.id,
          'prefectApproveAdvice':this.userInfo.username+this.prefectApproveAdvice,
          'prefectApproveTime':this.prefectApproveTime,
          'prefectApprove':1,
          'status':1,
        }
        let paramSuccess = {
          personId: this.form.personId,
          timePlanId: this.form.timePlanId,
          timeType: 0
        }
        operationObj(param).then(() => {
          addScheduleObj(paramSuccess).then(res =>{
            if (res.data.code === 0) {
              this.dialogEditVisibleSuccess = false
              this.$message.success('通过成功！')
              this.geteditList()
            }
          })
        })
      }else if (this.form.teacherApprove === 0 && this.Operator === true && this.form.prefectApprove === 0){
        this.dialogEditVisibleSuccess = false
        this.$message.error('请等待班主任操作完成')
      }
    },

    //返回跳转页面
    cancel: function () {
      this.$router.go(-1)
    },
    //驳回
    overrule: function () {
      this.dialogEditVisible = true
    },
    //通过
    success: function () {
      this.dialogEditVisibleSuccess = true
    },

    //关闭弹窗
    dictItemVisible:function (){
      this.dialogEditVisible = false
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

  }
}
</script>
<style scoped>
/deep/.avue-crud__menu{
  display: none;
}
/deep/.el-dialog__header{
  padding: 0!important;
}
/deep/.el-dialog__body{
  height: 320px;
  padding: 30px 30px 0 30px;
}
/deep/.el-image-viewer__img{
  max-width: 25% !important;
}
.radio{
  margin-right: 12px;
  padding: 0;
}
.left{
  float: left;
  height: 410px;
  border-radius: 5px;
  padding: 18px 0 10px 30px;
  box-shadow: 0 0 0 2px #e5e5e5;
}
.left p{
  width: 50%;
  display: inline-block;
  margin: 10px 0;
}
.right{
  float: right;
  height: 410px;
  width: 50% !important;
  border-radius: 5px;
  padding: 18px 0 10px 30px;
  box-shadow: 0 0 0 2px #e5e5e5;
}
.rightTop{
  width: 95%;
  height: 100px;
  background: #acacac;
  border-radius: 10px;
}
.rightTopLeft{
  float: left;
  padding-left:20px;
  margin: 0;
  display: inline-block;
  line-height: 100px;
  color: #fff
}
.rightTop .filter-item{
  font-size: 16px;
  color: #fff;
  float: right;
  line-height: 100px;
  padding: 0 20px 0 0;
}

.rightBottom{
  width: 95%;
  height: 100px;
  background: #4A71E3;
  border-radius: 10px;
}
.rightBottomLeft{
  float: left;
  padding-left:20px;
  margin: 0;
  display: inline-block;
  line-height: 100px;
  color: #fff
}
.rightBottom .filter-item{
  font-size: 16px;
  color: #fff;
  float: right;
  line-height: 100px;
  padding: 0 20px 0 0;
}
.Bottom{
  border-radius: 5px;
  padding: 10px 0 10px 30px;
  margin-top: 20px;
  box-shadow: 0 0 0 2px #e5e5e5;
}
.set{
  width: 24%;
  height:204px;
  display: inline-block;
}
.one{
  position: absolute;
  left: 8%;
}
.two{
  position: absolute;
  left: 23%;
}
.there{
  position: absolute;
  left: 38%;
}
.for{
  position: absolute;
  left: 56%;
}
.five{
  position: absolute;
  left: 71%;
}
.photo{
  display: inline-block;
  margin:10px 0 0 20px;
}
.enclosure{
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 80px!important;
  overflow: hidden;
  line-height: 90px;
}
.error{
  text-align: center;
  line-height: 165px;
}
</style>